<!-- 首页日历 -->
<template>
  <div>
    <Header>
      <div
        slot="extra"
        style="display: flex;align-items: center;justify-content: center;"
      >
        我的日程
      </div>
      <!-- <div slot="right-extra">
        <i
          @tap="allSchedule"
          class="jeicon jeicon-syrc je-audio-btn"
        />
      </div> -->
    </Header>
    <div
      class="pro-crm-home-calendar mui-content"
    >
      <div
        class="box-card"
      >
        <div class="calendar-body">
          <!-- 年份 月份 -->
          <section class="calendar-month">
            <span
              @tap="prevMonth()"
              class="prevMonth je-audio-btn"
            >❮</span>
            <div
              @tap="handleDateClick"
              class="text je-audio-btn"
            >
              {{ currentMonth }}
            </div>
            <span
              @tap="nextMonth()"
              class="nextMonth je-audio-btn"
            >❯</span>
            <span
              @tap="today()"
              class="today je-audio-btn"
            >今天</span>
          </section>
          <!-- 日期 -->
          <div
            :class="{collapse:collapseDays}"
            class="calendar-days"
          >
            <!-- 星期 -->
            <ul class="week-header">
              <li
                v-for="(text,i) of weekHeader"
                :key="i"
                class="day"
              >
                {{ text }}
              </li>
            </ul>
            <ul
              v-for="(week,i) of days"
              :key="i"
              :class="{select:isSelectWeek(week)}"
              class="week"
            >
              <li
                v-for="(day,j) of week"
                :key="j"
                :class="{'other-month':day.prevMonth || day.nextMonth,'today':day.isToday,
                         'select':isSelect(day),'task':isTask(day)}"
                @tap="selectDay(day)"
                class="day je-audio-btn"
              >
                <span>{{ day.sDay }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- <div style="position: relative;"> -->
        <!-- <div
            id="refreshContainer"
            class="mui-scroll-wrapper"
          > -->
        <div>
          <div
            id="refreshContainer"
          >
            <section
              v-if="currentTasks.length > 0 && showList"
              class="calendar-tasks mui-scroll"
              style="overflow:auto;"
            >
              <section
                v-for="(item, index) in bubbleList"
                :key="index"
                :title="item.CALENDAR_TITLE"
                @tap="goDetail(item)"
                class="task je-audio-btn"
              >
                <div
                  :style="{background: item.CALENDAR_COLOR || '#386BD0'}"
                  class="type"
                />
                <p
                  @tap="editCal(item)"
                  class="text je-audio-btn"
                >
                  <span>{{ shortTitle(item.CALENDAR_TITLE) }}</span>
                  <span>{{ getHour(item) }}</span>
                </p>
              </section>
            </section>
            <section
              v-else
              class="calendar-tasks"
              style="overflow:auto;"
            >
              <p class="no_calendar">
                今天没有日程~
              </p>
            </section>
          </div>
        </div>
      </div>
      <float-btn
        @tap="goDetail()"
        type="icon"
        text="jeicon-plus"
      />
      <div
        @tap="allSchedule"
        class="je-audio-btn-syrc float-btn"
      >
        <i
          class="jeicon-syrc jeicon"
        />
      </div>
    </div>
  </div>
</template>
<script>
import calendar from './calendar.js';

export default calendar;
</script>

<style lang="less" scoped>
@import "./index.less";

</style>
